<template>
  <!-- 服务组弹窗 -->
    <Modal v-model="dockerVisible" title="新增镜像库" :mask-closable="false" @on-cancel="dockerManiCancel">
      <div class="modal-add">
        <Form ref="dockerForm" :model="dockerForm" :rules="dockerRules" :label-width="70" label-position="left">
          <FormItem label="镜像地址" prop="url">
            <Input v-model.trim="dockerForm.url" placeholder="请输入镜像库地址: www.example.com" @on-blur="$limitLen"></Input>
          </FormItem>
          <FormItem label="用户名" prop="username">
            <Input v-model.trim="dockerForm.username" placeholder="请输入镜像库用户名" @on-blur="$limitLen"></Input>
          </FormItem>
          <FormItem label="密码" prop="password">
            <Input v-model.trim="dockerForm.password" type="password" placeholder="请输入密码" @on-blur="$limitLen"></Input>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button type="warning" @click="dockerManiCancel">取消</Button>
        <Button type="primary" :loading="isAdding" @click="dockerManiConf">确定</Button>
      </div>
    </Modal>
</template>
<script type="text/javascript">
import Fetch from '@/api/request'
export default {
  data() {
    const validateName = (rule, value, callback) => {
      let regName = /^[a-zA-Z0-9.]*$/
      if (!value) {
        callback(new Error('请输入镜像库地址'))
      } else if (!regName.test(value)) {
        callback(new Error('英文字母、数字、.组成'))
      } else if (value.length > 1024) {
        callback(new Error('最大长度不能大于1024位'))
      } else {
        callback()
      }
    }

    const validateLength = (rule, value, callback) => {
      if (value && value.length > 1024) {
        callback(new Error('最大长度不能大于1024位'))
      } else {
        callback()
      }
    }

    return {
      dockerForm: {
        environmentId: '',
        url: '',
        password: '',
        username: '',
        type: 'harbor'
      },
      isAdding: false,
      dockerRules: {
        url: [{required: true, trigger: 'blur', validator: validateName}],
        username: [{required: true, trigger: 'blur', validator: validateLength}],
        password: [{required: true, trigger: 'blur', validator: validateLength}]
      },
      dockerVisible: false
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 确认镜像库操作
    dockerManiConf() {
      this.$refs['dockerForm'].validate((valid) => {
        if (valid) {
          this.isAdding = true
          this.dockerForm.environmentId = this.$route.params.environmentId
          Fetch.post({
            url: '/api/environments/' + this.$route.params.environmentId + '/dockerhubs',
            params: this.dockerForm
          }).then((res) => {
            if (res && res.code === '0') {
              this.$Message.success({
                content: '镜像库' + res.data.url + '添加成功！',
                duration: this.DURATION
              })
              this.$emit('update:visible', false)
              this.$emit('finish', res.data.url)
            } else {
              this.$Message.warning({
                content: res.message || '服务器内部错误',
                duration: this.DURATION
              })
            }
            this.isAdding = false
          }).catch((err) => {
            this.isAdding = false
            this.$Message.error(err.message)
          })
        }
      })
    },
    // 取消镜像库操作
    dockerManiCancel() {
      this.$emit('update:visible', false)
    }
  },
  watch: {
    visible(val) {
      this.dockerVisible = val
      if (val) {
        this.$refs.dockerForm.resetFields()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.file-body {
  margin-bottom: 14px;
  .file-name {
    margin-bottom: 10px;
  }
  .file-remove {
    display: none;
    position: absolute;
    right: -8px;
    top: -8px;
    font-size: 22px;
    cursor: pointer;
    color: #e45049;
  }
  &:hover {
    .file-remove {
      display: block;
    }
  }
  .ivu-form-item-error-tip {
    margin-top: -13px;
  }
}
</style>
